var imgChoice = document.querySelector('#img');
var img = document.querySelector('img');
axios.defaults.baseURL = 'http://localhost:8888';   
imgChoice.onchange = () =>{
    const imgPath = imgChoice.files[0]
    if(imgPath){
        const reader = new FileReader();
        reader.onload = (event) => {
            // img.src = event.target.result;
            localStorage.setItem('img', event.target.result);
        }
        reader.readAsDataURL(imgPath)
    }
}
img.src = localStorage.getItem('img');
var article = document.querySelector('article');
var selects = document.querySelectorAll('nav>ul>li');

async function personal(){
    console.log(localStorage.getItem('id'))
    var res = await axios('/users/info',{params:{id:localStorage.getItem('id')},headers:{'authorization':localStorage.getItem('token'),'content-type':'application/x-www-form-urlencoded'}})
    console.log(res)
    var str =`<img src=${localStorage.getItem('img')}>
                <p>用户名:${res.data.info.username}</p>
                <p>年龄:<input class="age" ${res.data.info.age === '' ? 'placeholder="请输入您的年龄"' : `value="${ res.data.info.age}"`} type="text"></p>
                <p>性别:<input class="man" name="sex" type="radio">男<input class="women" type="radio" name="sex">女</p>
                <p>昵称:<input type="text" class="name" value="${res.data.info.nickname}"></p>
    `
    selects[0].style.backgroundColor = 'rgba(0,0,0,.2)'
    selects[0].style.color = '#fff'
    article.innerHTML = str
    var photo = document.querySelector('article>img')
    photo.style.width = '200px'
    photo.style.borderRadius = '50%'
    photo.style.boxShadow = '3px 3px 1px #ccc'
    photo.style.margin = '20px '
    var userName = document.querySelector('article>p:nth-of-type(1')
    userName.style.fontSize = '20px'
    var ageName = document.querySelectorAll('article>p>input[type="text"]')
    ageName.forEach(item => {
        item.style.width = '200px'
        item.style.margin = '10px'
        item.style.padding = '5px'
        item.style.borderRadius = '5px'
    })
    var sex = document.querySelectorAll('article>p>input[type="radio"]')
    console.log(sex)
    sex.forEach(item => {
        item.style.margin = '10px'
    })
}
personal()